<template>
    <view class="page">
        <view class="VerticalBox">
            <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="vertical_nav_top"
                :style="`800rpx`">
                <view class="cu-item cl" :class="index == tab_cur ? 'cur' : ''" v-for="(item, index) in list"
                    :key="index" @tap="TabSelect" :data-id="index">
                    {{ item.name }}
                </view>
            </scroll-view>
            <scroll-view class="VerticalMain" scroll-y scroll-with-animation :style="`height:800rpx`"
                :scroll-into-view="'main-' + main_cur" @scroll="VerticalMain">
                <view class="main-box">
                    <view class="mitem" v-for="(item, index) in list" :key="index" :id="'main-' + index">
                        <view class="miitem" v-for="(sitem, sindex) in item.children" :key="sindex">
                            <view class="mtitle">
                                <view class="mt">
                                    {{ sitem.name }}
                                </view>
                            </view>
                            <view class="grid bg-white  col-3 grid-box">
                                <view class="ci" v-for="(ssitem, indexss) in sitem.children" :key="indexss"
                                    @click.stop="selectItem(ssitem)">
                                    <view class="ciimg-box">

                                        <image class="ciimg" :src="$imgUrl + ssitem.img" />
                                    </view>
                                    <text class="citxt">{{ ssitem.name }}</text>

                                    <view class="act-box flex align-center justify-center"
                                        v-if="act_list.includes(ssitem.id)">
                                        <text class="cuIcon cuIcon-check"></text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <view class="fbom">
        </view>
    </view>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const emit = defineEmits(['change']);
const props = defineProps({
    cate_list: {
        type: Array,
        default: []
    },
    act: {
        type: Array,
        default: []
    }
});

const data = reactive({
    act_list: [], // 选中列表
    list: [],
    tab_cur: 0,
    main_cur: 0,
    vertical_nav_top: 0,
    load: true
})

const {
    act_list,
    list,
    tab_cur,
    main_cur,
    vertical_nav_top
} = toRefs(data)

onMounted(() => {
    data.act_list = props.act || []
    data.list = props.cate_list
})

function TabSelect(e) {
    data.tab_cur = e.currentTarget.dataset.id;
    data.main_cur = e.currentTarget.dataset.id;
    data.vertical_nav_top = (e.currentTarget.dataset.id - 1) * 50
}
function VerticalMain(e) {
    let tabHeight = 0;
    if (data.load) {
        for (let i = 0; i < data.list.length; i++) {
            let el = "#main-" + i
            let view = uni.createSelectorQuery().in(proxy).select(el);
            view.fields({
                size: true
            }, res => {
                data.list[i].top = tabHeight;
                tabHeight = tabHeight + res.height;
                data.list[i].bottom = tabHeight;
            }).exec();
        }
        data.load = false
    }
    let scrollTop = e.detail.scrollTop;
    for (let i = 0; i < data.list.length; i++) {
        if (scrollTop > data.list[i].top && scrollTop < data.list[i].bottom) {
            data.vertical_nav_top = (data.list[i].id - 1) * 50
            data.tab_cur = i
            return false
        }
    }


}


function selectItem(item) {
    let i = data.act_list.indexOf(item.id)
    if (i > -1) {
        data.act_list.splice(i, 1)
    } else {
        data.act_list.push(item.id)
    }

    emit('change', data.act_list)
}


onShareAppMessage(() => { })
onShareTimeline(() => { })
</script>

<style lang="scss" scoped>
.page {
    height: 800rpx;
    overflow-y: hidden;
}


.VerticalNav.nav {
    width: 200upx;
    white-space: initial;
    background-color: #fff;
}

.VerticalNav.nav .cu-item {
    width: 100%;
    text-align: center;
    background-color: #fff;
    margin: 0;
    border: none;
    height: 50px;
    position: relative;
}

.VerticalNav.nav .cu-item.cur {
    background-color: $bg;
}

.VerticalNav.nav .cu-item.cur::after {
    content: "";
    width: 8upx;
    height: 30upx;
    border-radius: 10upx 0 0 10upx;
    position: absolute;
    background-color: $main_color;
    top: 0;
    right: 0upx;
    bottom: 0;
    margin: auto;
}

.VerticalBox {
    display: flex;
}

.VerticalMain {
    /* background-color: #f1f1f1; */
    flex: 1;
}

.cl {
    font-size: 24rpx;
}

.main-box {
    padding-bottom: 30rpx;
}

.miitem {
    margin-bottom: 30rpx;
}

.mitem {
    margin: 30rpx 20rpx 0;
    background-color: #fff;

    .mtitle {
        width: 100%;
        padding: 20rpx 20rpx 20rpx 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .mt {
            font-size: 24rpx;
            color: #000;
        }

        .mx {
            font-size: 20rpx;
        }

        .mr {
            color: #999;
            display: flex;
            align-items: center;

            .cuIcon {
                font-size: 22rpx;
            }
        }
    }

    .grid-box {
        padding-bottom: 30rpx;
    }

    .ci {
        margin-top: 16rpx;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;

        .ciimg-box {
            width: 140rpx;
            height: 140rpx;
            padding: 20rpx;
            .ciimg {
                width: 100%;
                height: 100%;
            }
        }

        .act-box {
            width: 30rpx;
            height: 30rpx;
            position: absolute;
            left: 0;
            top: 0;
            background-color: $main_color;
            border-radius: 8rpx;
            .cuIcon {
                font-weight: bold;
                font-size: 22rpx;
                color: #fff;
            }
        }

        .citxt {
            margin-top: 16rpx;
            font-size: 22rpx;
            color: #000;
        }
    }
}
</style>
